<!--  收集资产 -->
<template>
  <div class="collect-container">
    <div class="assets-header">
      <div class="header-name">资产收集</div>
      <el-button type="primary" @click="output" class="search-btn"
        >导出报表</el-button
      >
    </div>
    <el-table :data="list" height="950" border stripe style="width: 100%">
      <el-table-column prop="userName" label="姓名" width="180" />
      <el-table-column prop="cpu" label="cpu" width="300" />
      <el-table-column prop="memory" label="内存容量" width="180" />
      <el-table-column prop="graphics" label="显卡" width="300" />
      <el-table-column prop="storage" label="硬盘" width="500" />
      <el-table-column prop="displays" label="显示器" />
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as XLSX from "xlsx";
const list = ref([
  {
    userName: "123",
    cpu: "Gen Intel® Core™ i5-11600KF",
    memory: "16G",
    graphics: "AMD Radeon R5 220",
    storage: "KINGSTON SA400S37240G",
    displays: "2490W1 AOC",
  },
  {
    userName: "123",
    cpu: "Gen Intel® Core™ i5-11600KF",
    memory: "16G",
    graphics: "AMD Radeon R5 220",
    storage: "KINGSTON SA400S37240G/KINGSTON SA400S37240G",
    displays: "2490W1 AOC",
  },
  {
    userName: "123",
    cpu: "Gen Intel® Core™ i5-11600KF",
    memory: "16G",
    graphics: "AMD Radeon R5 220",
    storage: "KINGSTON SA400S37240G",
    displays: "2490W1 AOC",
  },
]);
// 将list数据导出为excel文件
const output = () => {
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(list.value);
  // 设置表头
  const header = ["姓名", "CPU", "内存容量", "显卡", "硬盘", "显示器"];
  // 将表头插入到数据的第一行
  XLSX.utils.sheet_add_aoa(ws, [header], { origin: "A1" });
  // 将数据插入到表格中
  XLSX.utils.sheet_add_json(ws, list.value, {
    origin: "A2",
    skipHeader: true,
  });

  // 单元格宽度
  ws["!cols"] = [
    { wch: 10 },
    { wch: 35 },
    { wch: 20 },
    { wch: 35 },
    { wch: 40 },
    { wch: 40 },
  ];
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "assets.xlsx");
};
</script>

<style scoped lang="less">
.collect-container {
  width: 100%;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.021);
  .assets-header {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-name {
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }
    .search-btn {
      width: 120px;
      height: 40px;
      font-size: 16px;
      font-weight: 800;
    }
  }
}
</style>
